<template>
  <el-dialog
    :title="title"
    width="400px"
    :visible.sync="isDial"
    class="addLarge"
    :before-close="closeDialog"
  >
    <el-form :model="form" size="mini" :rules='rules' ref="addLarge">
      <el-form-item label="大类名称" prop="name" :label-width="formLabelWidth">
        <el-input v-model="form.name" class="leftBorder" :maxlength='10' autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="所在位置" prop="location" :label-width="formLabelWidth" v-if="serverType==1">
        <el-select v-model="form.location" multiple placeholder="请选择" class="leftBorder" :disabled="serverType==0?true:false">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id" 
          ></el-option>
        </el-select>
        <p style="font-size:12px">位置可多选，表示这个大类在多个空间都有</p>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" @click="saveLarge">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { request } from "../../assets/request.js";
export default {
  data() {
    return {
      isDial: false,
      form: {
        name: "",
        location: []
      },
      rules: {
        name: [
          {
            pattern: /^[\s\S]*.*[^\s][\s\S]*$/,
            required: true,
            message: "大类名称是必填项",
            trigger: "blur"
          }
        ],
        location: [
          {
            pattern: /^[\s\S]*.*[^\s][\s\S]*$/,
            required: true,
            message: "位置是必选项",
            trigger: "blur"
          }
        ]
      },
      title: "添加大类",
      formLabelWidth: "80px",
      options: "",
      serverType:1
    };
  },
  created() {
    this.$root.$on("addLarge", (type,serverType, id) => {
      this.options = this.$store.state.positionList;
      this.serverType=serverType
      if(serverType==0){
        let form=this.form
        form.location[0]='检查项目'
        this.form=form
      }else{
        let form=this.form
        form.location=[]
        this.form=form
      }
      if (type == "edit") {
        this.title = "编辑大类";
        let url = "bigType/" + id;
        let that = this; //解决this指向问题
        request.ajaxGet({
          url,
          that,
          fn(res) {
            console.log(res)
            if(res.location!=''){
                // let positionList=that.$store.state.positionList
                res.location=res.location.split('-')
                for(let i in res.location){
                  res.location[i]=parseInt(res.location[i])
                }
            }else{
                let arr = [];
                arr.push(res.location);
                res.location = arr;
            }
            that.form = res;
          }
        });
      } else {
        this.title = "添加大类";
      }
      this.isDial = true;
    });
  },
  methods: {
    saveLarge() {
        this.$refs.addLarge.validate(valid => {
            if(!valid){
                return
            }
            let form=this.form
            let met='POST'
            let that=this
            let params={
              name:form.name,
              location:form.location.join('-'),
              type:that.serverType
            }
            if(params.location=='检查项目'){
              params.location='1'
            }
            let url='bigType'
            if(that.title=="编辑大类"){
                met='PUT'
                params.id=form.id
            }
            console.log(params)
            request.ajaxPost({
                url,
                that,
                params,
                type:met,
                fn(res) {
                    that.isDial = false;
                    that.resetForm();
                    that.$root.$emit('saveLarge',that.serverType)
                }
            });
        })
    },
    resetForm() {
      //清空记录
      this.$refs["addLarge"].resetFields();
    },
    closeDialog() {
      this.isDial = false;
      this.resetForm();
    }
  }
};
</script>
<style lang="less" scoped>
.addLarge {
  text-align: left;
  .el-input {
    width: 80%;
  }
  .el-select {
    width: 80%;
  }
}
</style>
